<template>
	<view class="payBox">
		<view class="toper flex-row">
			<image :src='UserInfo.headImg'></image>
			<view class="infos">
				<view class="name">{{UserInfo.name}}</view>
				<!-- <view class="tips">开通会员, 享受更多权益!</view> -->
				<!-- <view class="tips">您的会员将在<text>2020</text>年<text>5</text>月<text>30</text>日 <text>8:30</text>分到期</view> -->
			</view>
		</view>
		<view class="content">
			<scroll-view class="scroll-view_H" scroll-x="true">

				<view class="scroll-view-item_H" :class="cure== index ?'active' : ''" @click="selectPackage(index,item.id,item.money)" v-for="(item,index) in packageList"
				 :key="index">
					<view class="price"><text>￥</text>{{item.money}}</view>
					<view class="desc">{{item.number}}次</view>
					<view class="desc">使用时限{{item.expiration}}天</view>

					<view class="tuijian" v-if="item.isSelected">推荐</view>
				</view>
			</scroll-view>
			<view class="buybtn" @click="buyNow">立即续费</view>
		</view>
		<view class="descBox">
			 <jyf-parser :html="html" ></jyf-parser>
			<!-- <view class="tls">购买须知</view>
			<view class="text">
				<view>1: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
				<view>2: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
				<view>3: 须知说明须知说明须知说明须知说明须知说明须知说明须知说明须知说明...</view>
			</view> -->
		</view>
		<uni-popup ref="uniPop" type="share">
			<uni-popup-payfor :type="msgType" @payTypes='payTypes' :money='money' :title="title" :before-close="true" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-payfor>
		</uni-popup>
		<passkeyborad :show="show" :money='money' @close='close' @password='password'></passkeyborad>
	</view>
</template>

<script>
	import md5 from '../../api/md5.js'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	import passkeyborad from '@/components/yzc-paykeyboard/yzc-paykeyboard.vue'
	export default {
		components: {
		      passkeyborad
		    },
		data() {
			return {
				html:'',
				type: 'bottom',
				msgType: 'info',
				title: "请选择支付方式",
				packageList: [],
				cure:-1,
				paystyle:[],
				payType:'',
				vipPackageId:'',
				UserInfo:'',
				money:0,
				orderId:'',
				show:false,
			}
		},
		mounted() {
			this.getVipPackageList();
			this.gettext()
			let id = uni.getStorageSync('userId')
			this.$http.get('/userCenter/getUserInfoById', {
				id: id
			}).then(res => {
				if (res.code == '0') {
					
					this.UserInfo = res.data
					
				} else {
					uni.showToast({
						icon: "none",
						title: res.msg
					})
				}
			})
		},
		methods: {
			//h获取密码 余额支付
			password(name){
				console.log(name)
				this.passwords = md5(name)
				this.show =false
				this.balancePayOrder()
				
				
			},
			close(flag){
				console.log(flag)
				this.show = flag
			},
			//获取文本
			gettext(){
				this.$http.get('/public/getAgreement', {
					type: 9
				}).then(res => {
					if (res.code == 0) {
						this.html = res.data.content
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//获取套餐列表
			getVipPackageList() {
				this.$http.get('/userCenter/getVipPackageList', {}).then(res => {
					if (res.code == '0') {
					
						if (res.data != '') {
							this.packageList = res.data;
							this.packageList.forEach(item => {
								item.isSelected = false;
							})
							this.packageList[1].isSelected = true;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//余额支付
			balancePayOrder(){
				console.log()
				this.$http.get('/orderPackage/balancePayOrder', {vipPackageId:this.vipPackageId,password:this.passwords}).then(res => {
					if (res.code == '0') {
						uni.showToast({
							title: res.msg,
							icon:'success',
						});
						uni.switchTab({
							url:'../tab/person'
						},2000)
						
					}else if(res.code==2){
						uni.showModal({
							title: '提示',
							content: res.msg,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url:'../person/setPayPwd'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
						
					}else {
						console.log(res.data)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 微信 支付宝支付
			getPayType(){
				console.log(this.payType)
				this.$http.get('/orderPackage/getOrderPayInfo', {payType:this.payType,vipPackageId:this.vipPackageId}).then(res => {
					console.log(res)
					if (res.code == '0') {
						
						if(this.payType==1){
							uni.requestPayment({
							       provider: 'wxpay',
							       orderInfo: JSON.stringify(res.data.orderInfo),
							       success: function(res) {
							           console.log('success:' + JSON.stringify(res));
							       },
							       fail: function(err) {
									   
							       }
							   });
						}else if(this.payType == 2){
							uni.requestPayment({
							       provider: 'alipay',
							       orderInfo:res.data.orderInfo,
							       success: function(res) {
							           console.log('success:' + JSON.stringify(res));
									   this.getOrderList()
							       },
							       fail: function(err) {
							           console.log('fail:' + JSON.stringify(err));
																			
							       }
							   });
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//根据支付类型获取支付方式
			payTypes(id){
				console.log(id)
				this.payType = id
				if(id ==1 || id ==2){
					this.getPayType()
				}else if(id ==3){
					this.balancePayOrder()
				}
				
			},
		
			
			selectPackage(index,id,money) {
				this.cure = index
				this.vipPackageId  =id
				this.orderId  =id
				this.money = money
				console.log(this.money)
				
			},
			buyNow() {
				this.$refs.uniPop.open()
			},
			/**
			 * 对话框点击确认按钮
			 */
			dialogConfirm(done) {
				console.log('点击确认');
				// 需要执行 done 才能关闭对话框
				done()
				this.show = true
			},
			/**
			 * 对话框取消按钮
			 */
			dialogClose(done) {
				this.msgType = 'info'
				this.message = '点击了对话框的取消按钮'
				// 需要执行 done 才能关闭对话框
				done()
			},
		}
	}
</script>

<style scoped lang="scss">
	.payBox {
		.descBox {
			padding: 30upx;

			.tls {
				font-size: 36upx;
				color: #22222A;
				padding-bottom: 30upx;
				font-weight: bold;
			}

			.text {
				color: #666666;
				font-size: 30upx;

				>view {
					line-height: 40upx;
					padding-bottom: 30upx;
				}
			}
		}

		.toper {
			height: 110upx;
			background: url(../../static/icon/vip_bg.png) no-repeat left top;
			background-size: 100% 100%;
			padding: 75upx 56upx;
			align-items: center;

			>image {
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
				margin-right: 30upx;
			}

			.infos {
				.name {
					color: #fff;
					font-size: 30upx;
					padding-bottom: 20upx;
				}

				.tips {
					color: #fff;
					font-size: 24upx;

					text {
						color: #FF502F;
					}
				}
			}
		}

		.content {
			background: #fff;
			padding: 40upx 30upx;

			.buybtn {
				width: 600upx;
				height: 80upx;
				margin: 60upx auto 0;
				text-align: center;
				line-height: 80upx;
				font-size: 30upx;
				color: #773B00;
				background: linear-gradient(90deg, rgba(253, 195, 88, 1) 0%, rgba(250, 221, 163, 1) 100%);
				border-radius: 8upx;
			}

			.scroll-view_H {
				/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
				white-space: nowrap;
				width: 100%;
				// padding: 0 30upx;
			}

			.scroll-view-item_H {
				position: relative;
				display: inline-block;
				width: 234upx;
				padding: 80upx 0;
				text-align: center;
				margin-right: 20upx;
				background: rgba(245, 245, 245, 1);
				border-radius: 20upx;
				align-items: center;

				&.active {
					background: rgba(255, 242, 223, 1);
					border: 1upx solid rgba(255, 117, 23, 1);

					.price {
						font-size: 43upx;
						color: #FF502F;
					}

					.desc {
						color: #644931;
						font-size: 26upx;
					}
				}

				.tuijian {
					position: absolute;
					left: 0;
					top: 0;
					width: 100upx;
					height: 40upx;
					color: #fff;
					font-size: 28upx;
					text-align: center;
					line-height: 40upx;
					background: url(../../static/icon/tips_bg.png) no-repeat left top;
					background-size: 100% 100%;
				}

				.price {
					font-size: 43upx;
					color: #854E13;
					padding-bottom: 30upx;
					font-weight: bold;

					text {
						font-size: 28upx;
					}
				}

				.desc {
					color: #644931;
					font-size: 26upx;
				}
			}

			.scroll-view-item_H view {
				box-sizing: border-box;
			}
		}
	}
</style>
